<template>
	<!-- @touchmove.stop.prevent="() => {} 解决弹窗开启后，背景部分仍然可以滚动的问题 -->
	<view @touchmove.stop.prevent="() => {}">
		<up-picker :show="show" :columns="[columns]" :defaultIndex="defaultIndex" closeOnClickOverlay @confirm="handleConfirm"
			@cancel="handleCancel" @change="handleChange" @close="handleClose" />
		<view @click="onCilck">
			<slot></slot>
		</view>
	</view>
</template>

<script setup>
	import { ref, reactive, computed } from 'vue';
	const props = defineProps({
		value: {
			type: [String, Number, Array, Object],
			default: ''
		},
		columns: {
			type: Array,
			default: []
		},
		defaultFirstLevelValue: {
			type: [String, Number],
			default: ''
		}
	})
	
	const emits = defineEmits(['onConfirm', 'onCancel', 'onChange','update:value'])
	const onCilck = () => {
		show.value = true
	}
	const show = ref(false)
	const defaultIndex = computed(() => {
		if (!props.columns) return []
		if (props.defaultFirstLevelValue) return [props.columns.findIndex(item => item === props.defaultFirstLevelValue)]
		else return [0]
	})
	const handleConfirm = e => {
		emits('onConfirm', e)
		emits('update:value', e.value)
		console.log('onConfirm', e.value);
		show.value = false;
	}
	const handleCancel = () => {
		emits('onCancel')
		show.value = false;
	}
	const handleClose = () => {
		show.value = false;
	}
	const handleChange = e => {
		console.log('onChange', e);
		emits('onChange', e)
	}

</script>

<style lang="scss">

</style>
